/**
 * Created by wfle on 2018/8/19.
 */

import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Platform, ScrollView, FlatList
} from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import ValidateDataUtil from '../../../utils/ValidateDataUtil';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { StockRow } from '../../../component/Stock.js';
import { Common } from '../../../component/common/Common';
import { cStyles } from '../storeStyle.js';

const scale = GLOBAL.SCALE;

export class StockDetailCompletePage extends Component {

	static navigationOptions = ({ navigation }) => {
		let { state, goBack } = navigation;
		const headerTitle = state.params ? state.params.title : "";
		return {
			headerTitle,
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			loaded: true,
			status: '',
			warehouseName: '',
			dataSource: [],
			checkBeginTime: '',
			checkEndTime: '',
		}
		this._renderItem = this._renderItem.bind(this);
	}

	componentWillMount () {

	}

	async componentDidMount () {
		const { planId } = this.props.navigation.state.params;
		const plan = await this._fetchPlanAsync(planId);
		const loaded = false;
		if (plan) {
			const { inventoryStandBookVOS, warehouseName, status, checkBeginTime, checkEndTime } = plan;

			this.setState({
				dataSource: inventoryStandBookVOS,
				loaded,
				status,
				warehouseName,
				checkBeginTime: this._getTimeStr(checkBeginTime),
				checkEndTime: this._getTimeStr(checkEndTime),
			});

		} else {
			this.setState({
				loaded
			});
		}
	}

	/**
 * 返回plan
* @param {String} planId
		*/
	async _fetchPlanAsync (planId) {
		const sendData = { planId };
		const responseData = await HTTP.POST(API_GENERATE(API.GET_STOCKPLAN_DETAIL), sendData);
		return responseData;
	}

	render () {
		const { status, warehouseName, checkBeginTime, checkEndTime } = this.state;
		const leftText = `仓库：${warehouseName}`;
		const rightText = `${status}`;
		const paneAndroid = (Platform.OS === 'android') ? cStyles.paneAndroid : null;
		const renderDataView = this.renderData();
		return (
			<ScrollView style={styles.container}>

				<View style={styles.stockTop}>
					<View style={styles.stockTopHead}></View>
					<View style={[styles.stockTopContent, paneAndroid]}>
						<View style={styles.warehouseNameRow}>
							<Text style={cStyles.text}>{leftText}</Text>
							<Text style={[cStyles.text, cStyles.textSuccess]}>{rightText}</Text>
						</View>
						<Text style={[cStyles.text, styles.checkBeginTime]}>开始盘点时间：{checkBeginTime}</Text>
						<Text style={cStyles.text}>结束盘点时间：{checkEndTime}</Text>
					</View>
				</View>

				{renderDataView}
			</ScrollView>
		);
	}

	/* 渲染列表 */
	renderData () {
		if (this.state.loaded) {
			return (
				<PageStatusIndex status={'loading'} />
			);
		} else {
			if (this.state.dataSource.length) {
				return (
					<FlatList
						data={this.state.dataSource}
						renderItem={this._renderItem}
						style={styles.flatList}
					/>
				);
			} else {
				return (
					<PageStatusIndex status={'empty'} title={''} />
				);
			}
		}

	}

	_renderItem (inventoryStandBookVOS) {
		const { goodsName, onhandQuantity, onpassQuantity } = inventoryStandBookVOS.item;

		return (
			<View style={styles.stockRow}>
				<StockRow height={50} strList={[`商品：${goodsName}`, `台账数量：${onhandQuantity}`]} style={[{ backgroundColor: '#fff', }]} />
				<View style={styles.quantityRow}>
					<Text style={cStyles.text}>实际盘点数量：</Text>
					<Text style={cStyles.textQuantity}>{onpassQuantity}</Text>
				</View>
			</View>
		);
	}

	_getTimeStr (str) {
		if (!ValidateDataUtil.isEmpty(str)) {
			const currDate = new Date(str.replace(/-/g, '/'));
			var y = currDate.getFullYear(),
				m = currDate.getMonth() + 1,
				d = currDate.getDate(),
				h = currDate.getHours(),
				mi = currDate.getMinutes();
			let dateStr = "";
			dateStr += y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + (h < 10 ? "0" + h : h) + ":" + (mi < 10 ? "0" + mi : mi);
			return dateStr;
		} else {
			return null;
		}
	}

}


const styles = StyleSheet.create({
	warehouseNameRow: {
		justifyContent: 'space-between',
		flexDirection: 'row',
	},
	checkBeginTime: {
		marginTop: 12 * scale,
		marginBottom: 12 * scale,
	},
	stockTop: {
		height: 123 * scale,
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
	},
	stockTopHead: {
		height: 60 * scale,
		width: 375 * scale,
		backgroundColor: style.color.themeColor,
	},
	stockTopContent: {
		width: 351 * scale,
		backgroundColor: '#fff',
		shadowColor: '#D2D2D2',
		shadowOffset: { width: 0, height: 2 * scale },
		shadowRadius: 4 * scale,
		shadowOpacity: 0.5,
		borderRadius: 8,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingTop: 17 * scale,
		paddingBottom: 17 * scale,
		top: -47.5 * scale,
	},
	quantityRow: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 12 * scale,
	},
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	stockRow: {
		marginBottom: 12 * scale,
		backgroundColor: '#fff',
		paddingBottom: 16 * scale,
	},
	flatList: {
		marginTop: 12 * scale,
		backgroundColor: '#F5F5F5',
	},
	circleBtnCell: {
		alignItems: 'center',
		width: 375 * scale,
		height: 109 * scale,
		// position: 'absolute',
		// left: 0,
		// bottom: 0,
	},
	circleBtn: {
		width: 80 * scale,
		height: 80 * scale,
		backgroundColor: style.color.themeColor,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 50,
	},
	circleBtnText: {
		fontSize: 22 * scale,
		color: '#fff'
	},
});